import './index.css'

export default function Footer(props) {
  const {todos} = props
  const doneCount = todos.reduce((pre, todo) => {
    return pre + (todo.done ? 1 : 0)
  }, 0)

  function checkAll(e) {
    props.handleCheckAll(e.target.checked)
  }

  function clearDoneTodos() {
    props.clearDoneTodos()
  }

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={todos.length === doneCount} onChange={checkAll}/>
      </label>
      <span>
        <span>已完成 {doneCount}</span> / 全部 {todos.length}
      </span>
      <button className="btn btn-danger" onClick={clearDoneTodos}>清除已完成任务</button>
    </div>
  )
}
